<template>
  <div class="player">
    <div class="bg"></div>

    <div class="view">
      <div class="top_nav">
        <div class="nav">
          <span class="iconfont icon-youjiantou1"></span>
          <i>手机号注册</i>
          <span class="iconfont icon-gengduo"></span>
        </div>
      </div>
      <div class="content">
        <!-- 图片 -->
        <div class="img">
          <img src="../../assets/img/logo.png" alt="" />
        </div>
        <!-- 作者信息 -->
        <div class="author_info">
          <div>
            <p>作者:副手</p>
            <p>主播:夜间道</p>
          </div>
          <div>
            <p>集数:913集</p>
            <p>每集价格:15阅点</p>
          </div>
        </div>
        <!-- 书籍内容 -->
        <div class="book_intro">
          <p>书籍简介</p>
          <p>【内容简介】</p>
          <div>
            <p class="intro_box">
              暗示法那是你覅偶爱上你佛as非农我我弄为万覅哦按佛完asnoif你哦你奥那艘in发ISOan佛i暗示法那是你覅偶爱上你佛as非农我我弄为万覅哦按佛完asnoif你哦你奥那艘in发ISOan佛i暗示法那是你覅偶爱上你佛as非农我我弄为万覅哦按佛完asnoif你哦你奥那艘in发ISOan佛i暗示法那是你覅偶爱上你佛as非农我我弄为万覅哦按佛完asnoif你哦你奥那艘in发ISOan佛i暗示法那是你覅偶爱上你佛as非农我我弄为万覅哦按佛完asnoif你哦你奥那艘in发ISOan佛i
            </p>
          </div>
        </div>
      </div>
      <!-- 按钮 -->
      <div class="Buttons">
        <!-- 进度条 -->
        <div class="range">
          <van-slider
            class="slider"
            :button-size="6"
            v-model="currentPlay"
            :active-color="'#ff0000'"
            @change="sliderChangeFun"
          />
          <div class="timeLeft">00:00</div>
          <div class="timeRight">04:00</div>
        </div>
        <div class="btn">
          <div class="icon">
            <span @click="showList = true" class="iconfont icon-liebiao"></span>
          </div>
          <div class="icon">
            <span class="iconfont icon-Prev" @click="lastSong"></span>
          </div>
          <div class="icon">
            <span
              class="iconfont"
              :class="isPlaying ? 'icon-zanting' : 'icon-yunhang'"
              @click="togglePlay"
            ></span>
          </div>
          <div class="icon">
            <span class="iconfont icon-Next" @click="nextSong"></span>
          </div>
          <div class="icon">
            <span class="iconfont icon-timer"></span>
          </div>
        </div>
      </div>
      <div class="user_block">
        <div class="option">
          <span class="iconfont icon-shujia"></span>
          <p class="text">加入书架</p>
        </div>
        <div class="option">
          <span class="iconfont icon-wp-sj"></span>
          <p class="text">阅读书籍</p>
        </div>
        <div class="option">
          <span class="iconfont icon-xiazai"></span>
          <p class="text">批量下载</p>
        </div>
        <div class="option">
          <span class="iconfont icon-pinglun1"></span>
          <p class="text">评论</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 当前播放时间
      currentPlay: 0,
      // 播放状态
      isPlaying: false,
      // 展示小说列表
      showList: false,
    };
  },
};
</script>

<style lang="less" scoped>
.player {
  height: 100vh;
  .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: url("https://p1.music.126.net/ZVMvmb599lEPF2KxTt9gvQ==/109951165807960507.jpg")
      no-repeat center center;
    filter: blur(20px);
    z-index: 0;
  }
  .view {
    .top_nav {
      // background-color: transparent;
      height: 5vh;
      padding: 0 16px 0 16px;
      z-index: 1;
      .nav {
        height: 100%;
        display: flex;
        align-items: center;
        color: #fff;
        span {
          color: #fff;
          font-size: 15px;
          z-index: 1;
        }
        i {
          font-size: 18px;
          flex: 1;
          display: block;
          width: 100%;
          text-align: center;
          z-index: 1;
          font-style: none;
        }
      }
    }

    .content {
      padding: 0 15px;
      height: 71vh;
      width: 100%;
      // text-align: center;
      position: relative;
      overflow: hidden;
      .img {
        width: 100px;
        height: 135px;
        margin: 23px auto 60px auto;
        img {
          width: 100px;
          height: 135px;
        }
      }
      .author_info {
        div {
          width: 100%;
          display: flex;
          font-size: 12px;
          color: #d0ced1;
          p {
            width: 500%;
          }
        }
      }
      .book_intro {
        font-size: 12px;
        color: #989898;
        margin-top: 10px;
        p {
          margin-top: 3px;
        }
        .intro_box {
          height: 49px;
          overflow: hidden;
          display: -webkit-box; /*弹性伸缩盒子*/
          -webkit-box-orient: vertical; /*子元素垂直排列*/
          -webkit-line-clamp: 4; /*可以显示的行数，超出部分用...表示*/
          text-overflow: ellipsis; /*（多行文本的情况下，用省略号“…”隐藏溢出范围的文本)*/
        }
      }
    }
    .Buttons {
      position: relative;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 15vh;

      .btn_top {
        position: relative;
        width: 76.5%;
        margin: 0 auto 12px auto;
        display: flex;
        justify-content: space-around;
        height: 15px;
        line-height: 15px;
        text-align: center;
        .icon {
          width: 16.1%;
          .iconfont {
            font-size: 15px;
            color: rgba(255, 255, 255, 0.9);
          }
        }
      }

      //进度条
      .range {
        width: 76.5%;
        margin: 0 auto;
        position: relative;
        .timeLeft,
        .timeRight {
          position: absolute;
          top: -6px;
          left: -30px;
          font-size: 12px;
          color: #fff;
          transform: scale(0.7);
        }
        .timeRight {
          left: auto;
          right: -30px;
        }
      }
      .btn {
        width: 76.5%;
        margin: 20px auto 0 auto;
        display: flex;
        justify-content: space-around;
        height: 50px;

        line-height: 50px;
        text-align: center;
        .icon {
          width: 16.1%;
          height: 50px;
          .iconfont {
            font-size: 20px;
            color: #fff;
          }
          .icon-zanting,
          .icon-yunhang {
            font-size: 50px;
          }
        }
      }
    }
    .user_block {
      height: 7vh;
      width: 100vw;
      display: flex;
      .option {
        width: 25%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        text-align: center;
        z-index: 1;
        .iconfont {
          font-size: 16px;
          color: #fff;
        }
        p {
          margin-top: 5px;
          color: #fff;
          font-size: 12px;
        }
      }
    }
  }

  .rorate {
    transform: rotate(90deg);
  }
}
</style>